<template>
  <div class="resune-list">
    <div style="margin-top:2rem;margin-bottom:2rem;">
      <el-row>
        <el-col :span="3">
          <p>
            <el-select v-model="q.positionArea" placeholder="职位地区" clearable>
              <el-option v-for="item in positionAreaOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </p>
        </el-col>
        <el-col :span="3">
          <p>
            <el-select v-model="q.appliedPosition" placeholder="应聘职位" clearable>
              <el-option v-for="item in appliedPositionOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </p>
        </el-col>
        <el-col :span="2">
          <p>
            <el-select v-model="q.gender" placeholder="性别" clearable>
              <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </p>
        </el-col>
        <el-col :span="3">
          <p>
            <el-select v-model="q.typesOfSchools" placeholder="学校类型" clearable>
              <el-option v-for="item in typesOfSchoolsOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </p>
        </el-col>
        <el-col :span="3">
          <p>
            <el-select v-model="q.status" placeholder="状态" clearable>
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </p>
        </el-col>
        <el-col :span="3">
          <p>
            <el-input v-model="q.name" placeholder="请输入姓名" clearable @keyup.enter.native="getData"></el-input>
          </p>
        </el-col>
        <el-col :span="3">
          <p>
            <el-input v-model="q.phoneNumber" placeholder="请输入手机号" clearable @keyup.enter.native="getData"></el-input>
          </p>
        </el-col>
        <el-col :span="3">
          <p>  
            <el-button type="primary" style="margin-left:1rem;" @click="search">搜索</el-button>
            <el-button type="primary" @click="refresh" style="margin-left:1rem;"><i class="el-icon-delete"></i>&nbsp;<i
                class="el-icon-refresh"></i></el-button>
          </p>
        </el-col>
      </el-row>
    </div>
    <el-table :data="tableData" @selection-change="handleSelectionChange" border style="width: 100%;margin-top:2rem;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="positionArea" sortable label="地区" width="60">
      </el-table-column>
      <el-table-column prop="appliedPosition" sortable label="职位">
      </el-table-column>
      <el-table-column label="姓名" width="80">
        <template slot-scope="scope">
          <el-button @click="showDetail(scope.row)" type="text" size="small">{{scope.row.name}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="gender" label="性别" sortable width="50">
      </el-table-column>
      <el-table-column prop="age" label="年龄" sortable width="50">
      </el-table-column>
      <el-table-column prop="phoneNumber" label="手机号码" width="120">
      </el-table-column>
      <el-table-column prop="applicationTime" label="应聘时间" sortable>
      </el-table-column>
      <el-table-column prop="graduateSchool" label="毕业学校">
      </el-table-column>
      <el-table-column prop="typesOfSchools" label="学校类型" sortable width="120">
      </el-table-column>
      <el-table-column prop="education" label="学历" sortable width="80">
      </el-table-column>
      <el-table-column prop="workingYears" label="工作年限" sortable width="50">
      </el-table-column>
      <el-table-column prop="recentWorkCompany" label="最近工作" width="120">
      </el-table-column>
      <el-table-column prop="status" :formatter="formatStatus" label="状态" sortable width="100">
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间" sortable>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="280">
        <template slot-scope="scope">
          <el-button @click="updateOne(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="download(scope.row)" type="text" size="small">下载</el-button>
          <el-button @click="forward(scope.row)" type="text" size="small">转发</el-button>
          <el-button @click="writtenExaminationInvitation(scope.row)" type="text" size="small">线上笔试</el-button>
          <el-button @click="deleteOne(scope.row)" type="text" size="small">删除</el-button>
          <el-button @click="showOperateLog(scope.row)" type="text" size="small">历史</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div style="margint-top:2rem;">
      <el-row>
        <el-col :span="12">
          <p>
            <el-button type="primary" @click="batchDelete" size="mini"><i class="el-icon-delete"></i>&nbsp;批量删除
            </el-button>
            <el-button type="primary" @click="batchUpdateStatus" size="mini"><i class="el-icon-edit"></i>&nbsp;批量修改状态
            </el-button>
            <el-button type="primary" @click="batchForward" size="mini"><i class="el-icon-message"></i>&nbsp;批量转发
            </el-button>
          </p>
        </el-col>
        <el-col :span="12">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.page"
            :page-sizes="[20,50,100,200,1000]" :page-size="q.limit"
            layout="total, sizes, prev, pager, next, jumper" :total="q.total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>

    <!--修改弹框-->
    <updateResume ref="updateDiolog" @fnc="getData" />
    <!--详情弹框-->
    <detail ref="detailDiolog"></detail>
    <!--转发弹框-->
    <forward ref = "forwardDiolog" @fnc="getData"></forward>
    <!--批量修改状态-->
    <batchUpdate ref = "batchUpdateDiolog" @fnc="getData"></batchUpdate>
    <!--批量转发-->
    <batchForward ref="batchForward"></batchForward>
    <!--操作历史-->
    <operateLog ref="operateLogDiolog"></operateLog>
    <!--笔试-->
    <writtenExaminationInvitation ref="writtenExaminationInvitation"/>
  </div>
</template>

<script>
  import _ from 'lodash'
  import updateResume from './list-updateResume'
  import detail from './list-detail'
  import forward from './list-forward'
  import batchUpdate from './list-batchUpdate'
  import batchForward from './list-batchForward'
  import operateLog from './list-operateLog'
  import writtenExaminationInvitation from './list-writtenExaminationInvitation.vue'
  export default {
    components: {
      updateResume,
      detail,
      forward,
      batchUpdate,
      operateLog,
      batchForward,
      writtenExaminationInvitation
    },
    data() {
      return {
        q: {
          page: 1,
          limit: 50,
          total: 0,
          positionArea: null,
          appliedPosition: null,
          gender: null,
          typesOfSchools: null,
          status: null,
          phoneNumber:null,
          name: '',
        },
        downloadPath: '',
        tableData: [],
        rowData: {},
        multipleSelection: [], //多选
        detail: false, //详情 
        positionAreaOptions: [{
            value: '上海',
            label: '上海'
          },
          {
            value: '北京',
            label: '北京'
          },
          {
            value: '南京',
            label: '南京'
          },
          {
            value: '西安',
            label: '西安'
          },
          {
            value: '成都',
            label: '成都'
          },
          {
            value: '太原',
            label: '太原'
          }
        ],
        appliedPositionOptions: [],
        genderOptions: [{
            value: '男',
            label: '男'
          },
          {
            value: '女',
            label: '女'
          }
        ],
        typesOfSchoolsOptions: [{
            value: '普通院校',
            label: '普通院校'
          },
          {
            value: '985',
            label: '985'
          },
          {
            value: '211',
            label: '211'
          },
          {
            value: '港澳台院校',
            label: '港澳台院校'
          },
          {
            value: '海外院校',
            label: '海外院校'
          },
          {
            value: '中学',
            label: '中学'
          },
          {
            value: '职业教育',
            label: '职业教育'
          },
          {
            value: '培训机构',
            label: '培训机构'
          }
        ],
        statusOptions: [{
          value: 0,
          label: '未处理'
        }, {
          value: 1,
          label: '不符合要求',
        }, {
          value: 2,
          label: '已转发'
        }, {
          value: 3,
          label: '已通知'
        }, {
          value: 4,
          label: '已笔试'
        }, {
          value: 5,
          label: '一面通过'
        }, {
          value: 6,
          label: '一面未通过',
        }, {
          value: 7,
          label: '二面通过'
        }, {
          value: 8,
          label: '二面未通过'
        }, {
          value: 9,
          label: '已录用'
        }, {
          value: 10,
          label: '已过期'
        }, {
          value: 11,
          label: '待定'
        }]

      }
    },
    watch: {
     'q.positionArea': {
         handler: function() {
            this.q.page=1
            this.getData()
         }
     },
     'q.appliedPosition': {
         handler: function() {
            this.q.page=1
            this.getData()
         }
     },
     'q.gender': {
         handler: function() {
            this.q.page=1
            this.getData()
         }
     },
     'q.typesOfSchools': {
         handler: function() {
            this.q.page=1
            this.getData()
         }
     },
     'q.status': {
         handler: function() {
            this.q.page=1
            this.getData()
         }
     },
     '$route.path':function(newVal,oldVal){//监视路由地址，若发生变化会执行函数
        try{
          this.getData()
        }catch(e){
          console.log(e)
        }
      }
    },
    created() {
      this.downloadPath = window.SITE_CONFIG['baseUrl'] + '/resume/download'
      this.getData()
      this.getJobPosition()
    },
    methods: {
      //获取数据
      getData() {
        this.$http({
          url: `${this.$http.adornUrl('/resume/list?token='+this.$cookie.get('token') )}`,
          method: 'get',
          params: this.$http.adornParams(this.q)
        }).then(({
          data
        }) => {
          if (data['code'] == 0) {
            this.q.total = data.page.total
            let records = data.page.records
            for (let i = 0; i < records.length; i++) {
              records[i]['age'] = records[i]['age'] === "" ? 0 : parseInt(records[i]['age'])
              records[i]['workingYears'] = records[i]['workingYears'] === "" ? 0 : parseFloat(records[i][
                'workingYears'
              ])
            }
            console.log(records)
            this.tableData = records
          } else {
            this.$message({
              message: '数据获取错误',
              type: 'error'
            });
          }
        })
      },
      getJobPosition(){
        console.log("aaaa")
        this.$http({
          url: `${this.$http.adornUrl('/jobPositionMatching/jobPosition?token='+this.$cookie.get('token') )}`,
          method: 'get'
        }).then(({
          data
        }) => {
          if (data['code'] == 0) {
            let dt = data.data
            var result = []
            for (let i = 0; i < dt.length; i++) {
              let obj = {}
              obj.label = dt[i]
              obj.value = dt[i]
              result.push(obj)
            }
            this.appliedPositionOptions = result
          } else {
            this.$message({
              message: '数据获取错误',
              type: 'error'
            });
          }
        })
      },
      //搜索
      search() {
        this.page=1
        this.getData()
      },
      //刷新
      refresh() {
        this.q.positionArea = null
        this.q.appliedPosition = null
        this.q.gender = null
        this.q.typesOfSchools = null
        this.q.status = null
        this.q.name = ''
        this.q.phoneNumber = ''
        this.getData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(val)
      },
      //线上笔试
      writtenExaminationInvitation(row){
          this.$refs.writtenExaminationInvitation.init(row)
      },
      //修改
      updateOne(row) {
        let data = _.cloneDeep(row)
        this.$refs.updateDiolog.init(data)
      },
      //显示详情
      showDetail(row) {
        let data = _.cloneDeep(row)
        this.$refs.detailDiolog.init(data)
      },
      //显示操作历史
      showOperateLog(row){
        let data = _.cloneDeep(row)
        this.$refs.operateLogDiolog.init(data)
      },
      //下载
      download(row) {
        let url = window.SITE_CONFIG['baseUrl'] + "/resume/download?id=" + row.resumeId + '&token=' + this.$cookie.get(
          'token')
        window.open(url, '_blank')
      },
      //转发
      forward(row) {
        let data = _.cloneDeep(row)
        this.$refs.forwardDiolog.init(data)
      },
      //删除
      deleteOne(row) {
        this.rowData = row
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: `${this.$http.adornUrl('/resume/'+row.resumeId+'?token='+this.$cookie.get('token') )}`,
            method: 'delete',
          }).then(({
            data
          }) => {
            if (data['code'] == 0) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getData()
            } else {
              this.$message({
                message: '数据删除错误',
                type: 'error'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      //批量删除
      batchDelete() {
        let ids = _.map(this.multipleSelection, "resumeId")
        if (ids.length == 0) {
          this.$message({
            message: '未选择数据',
            type: 'warning'
          });
        } else {
          this.$confirm('此操作将永久删除多条数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http({
              url: `${this.$http.adornUrl('/resume/?token='+this.$cookie.get('token') )}`,
              method: 'delete',
              data: this.$http.adornParams(ids, false)
            }).then(({
              data
            }) => {
              if (data['code'] == 0) {
                this.$message({
                  message: '数据删除成功',
                  type: 'success'
                });
                this.getData()
              } else {
                this.$message({
                  message: '数据删除错误',
                  type: 'error'
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      },
      //批量修改状态
      batchUpdateStatus(){
        if(this.multipleSelection.length==0){
          this.$message({
            message: '未选择数据',
            type: 'warning'
          });
        }else{
          this.$refs.batchUpdateDiolog.init(this.multipleSelection)
        }    
      },
      formatStatus(row, cpl, val) {
        if (val == 0) {
          return '未处理'
        } else if (val == 1) {
          return '不符合要求'
        } else if (val == 2) {
          return '已转发'
        } else if (val == 3) {
          return '已通知'
        } else if (val == 4) {
          return '已笔试'
        } else if (val == 5) {
          return '一面通过'
        } else if (val == 6) {
          return '一面未通过'
        } else if (val == 7) {
          return '二面通过'
        } else if (val == 8) {
          return '二面未通过'
        } else if (val == 9) {
          return '已录用'
        } else if (val == 10) {
          return '已过期'
        }else if(val == 11){
          return '待定'
        }
      },
      batchForward(){
        if(this.multipleSelection.length==0){
          this.$message({
            message: '未选择数据',
            type: 'warning'
          });
          return
        }
        this.$refs.batchForward.init(this.multipleSelection)
      },
      handleSizeChange(val) {
        this.q.limit = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.q.page = val
        this.getData()
      }
    }
  }

</script>
